<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WPF/E QuickStart: part 1: create a WPF/E project</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type='text/javascript' src='samples/aghost.js'></script>
</head>
<body>
    <div class="header-section">
        <table>
            <tr>
                <td>
                    <img src="images/bookwithtools.png" /></td>
                <td valign="top">
                    <h1>
                        part 1: create a WPF/E project</h1>
                </td>
            </tr>
        </table>
    </div>
    <a class="showtoclink" href="FileSetup-frames.html">show toc</a>
    <div class="intro-section">
        <p>
            How do you add WPF/E to your web page? A typical WPF/E project has four files: an
            HTML file that hosts or displays content, an aghost.js file, a XAML file, and a
            JavaScript file. This document describes how to create a WPF/E project and add WPF/E
            content to an HTML file in three steps.&nbsp; This guide contains the following
            sections.</p>
        <ul>
            <li><a href="#prereqs">before you get started...</a></li>
            <li><a href="#setupaghost">step 1: setup an aghost.js file</a></li>
            <li><a href="#createcontrol">step 2: create an ActiveX control in your HTML file</a></li>
            <li><a href="#createcontent">step 3: create WPF/E content files</a></li>
            <li><a href="#additionalcontent">adding additional WPF/E content</a></li>
            <li><a href="#sampleproject">a sample project</a></li>
            <li><a href="#whatsnext">what's next?</a></li>
        </ul>
    </div>
    <div class="section">
        <a name="prereqs"></a>
        <h3>
            before you get started...</h3>
        <p>
            Before you can create WPF/E content, you&#39;ll need the following items.</p>
        <ul>
            <li>the WPF/E plugin: If you haven't already done so,
			<a href="http://go.microsoft.com/fwlink/?LinkID=77792&clcid=0x409">follow this
			link to install the WPF/E plugin for your browser</a>.</li>
            <li>an HTML file: You'll need an HTML file to display WPF/E content. Use one of
                your own, or copy <a href="samples/SampleHTMLPage.html">this one</a>.</li>
            <li>a text editor: You&#39;ll need a text editor, such as Notepad, to edit your HTML
                file. For information about using Visual Studio to edit your WPF/E project, see
                <a href="vs-html-noframes.html">create a Visual Studio WPF/E project</a>.</li>
        </ul>
    </div>
    <div class="section">
        <a name="setupaghost"></a>
        <h3>
            step 1: setup an aghost.js file</h3>
        <p>
            The <code>aghost.js</code> file is a JavaScript helper file that enables your WPF/E
            content to be viewed on multiple platforms.
        </p>
        <ol type="a">
            <li>
                <p>
                    Copy this <a href="samples/aghost.js">aghost.js file</a> to the
                    same directory as your HTML page:&nbsp; right-click the&nbsp; <a href="samples/aghost.js">
                        aghost.js</a> hyperlink and then select &quot;Save As...&quot; to store the
                    aghost.js file in the same directory as your HTML page.</p>
            </li>
            <li>
                <p>
                    Open your HTML page and add following markup inside the <code>&lt;head&gt;</code>
                    section. If you don&#39;t already have an HTML file you&#39;d like to use, right
                    click this <a href="samples/SampleHTMLPage.html">SampleHTMLPage.html</a> link and
                    then select &quot;Save Target As...&quot; to save SampleHTMLPage.html in the same
                    folder as the aghost.js file.</p>
                <pre class='html'>
<font size="2" color="#0000ff">&lt;</font><font size="2" color="#800000">script</font><font
    size="2"> </font><font size="2" color="#ff0000">type</font><font size="2" color="#0000ff">=&quot;text/javascript&quot;</font> <font
        size="2" color="#ff0000">src</font><font size="2" color="#0000ff">=&quot;aghost.js&quot;&gt;&lt;/</font><font
            size="2" color="#800000">script</font><font size="2" color="#0000ff">&gt;</font></pre>
            </li>
        </ol>
        <p>
            Your HTML page should now contain the following basic elements:</p>
        <pre class='html'>
<font size="2" color="#0000ff">&lt;!DOCTYPE html PUBLIC
</font><font size="2">  </font><font size="2" color="#0000ff">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;title&gt;A Sample HTML page&lt;/title&gt;
    &lt;</font><font
        size="2" color="#800000">script</font><font size="2"> </font><font size="2" color="#ff0000">type</font><font size="2" color="#0000ff">=&quot;text/javascript&quot;</font> <font
                size="2" color="#ff0000">src</font><font size="2" color="#0000ff">=&quot;aghost.js&quot;&gt;&lt;/</font><font
                    size="2" color="#800000">script</font><font size="2" color="#0000ff">&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;</font></pre>
    </div>
    <div class="section">
        <a name="createcontrol"></a>
        <h3>
            step 2: create an WPF/E ActiveX control in your HTML file</h3>
        <p>
            To display WPF/E content, you create an ActiveX control inside your HTML file.&nbsp;&nbsp;
        </p>
        <ol type="a">
            <li>
                <p>
                    Create the host HTML element by adding the following three lines to your HTML file,
                    between the <code>&lt;body&gt;</code> tags, where you want your WPF/E content to
                    appear.</p>
                <pre class="html">
<span class="code-green">&lt;!-- Where the WPF/E ActiveX control will go--&gt;</span>
&lt;div id=&quot;agControl1Host&quot;&gt;
&lt;/div&gt;</pre>
                <p>
                    You can change the ID of the <code>&lt;div&gt;</code> tag, but if you do you
					will also need to change the first parameter for agHost in
					the next step to match.</p>
            </li>
            <li>
                <p>
                    After the HTML you added in the previous step, add the following HTML + script to
                    create the WPF/E ActiveX control.</p>
                <pre class="javascript">
<font size="2" color="#0000ff">&lt;</font><font size="2" color="#800000">script</font><font
    size="2"> </font><font size="2" color="#ff0000">type</font><font size="2" color="#0000ff">=&quot;text/javascript&quot;&gt;</font>
	<span class="code-green">// Create the WPF/E ActiveX control.
        // The technique here enables your WPF/E content to receive
        // input before its ActiveX control is clicked.</span>
	new agHost(
		&quot;agControl1Host&quot;, <span class="code-green">// hostElementID (The HTML element inside of which</span>
		<span class="code-green">// the WPF/E ActiveX control is inserted.
                  // This element is usually a &lt;div&gt;)
                  // If you change the name of the host HTML element,
                  //change it here too.</span>
		&quot;agControl1&quot;,<span class="code-green"> // The ID of the WPF/E ActiveX control to create.</span>
		&quot;300px&quot;, <span class="code-green">// The width of the control.</span>
		&quot;300px&quot;, <span class="code-green">// The height of the control.</span>
		&quot;#D6D6D6&quot;, <span class="code-green">// The background color of the control.</span>
		null, <span class="code-green">// SourceElement (name of script tag containing XAML)</span>
		&quot;myxaml.xaml&quot;, <span class="code-green">// The uri of the source file that
                                 // contains the WPF/E content.</span>
		&quot;false&quot;, <span class="code-green">// IsWindowless</span>
		&quot;30&quot;, <span class="code-green">// MaxFrameRate</span>
		null <span class="code-green">// OnError handler.
                       // You can set this to a method name (no quotes).</span>
	);

	<span class="code-green">// Create a global variable for the WPF/E ActiveX control,
         // to use when you want to retrieve named XAML elements. </span>
	var agControl = document.getElementById(&quot;agControl1&quot;);

<font size="2" color="#0000ff">&lt;/</font><font size="2" color="#800000">script</font><font
    size="2" color="#0000ff">&gt;</font>
</pre>
            </li>
        </ol>
        <p>
            This script contains several parameters you might want to customize, such as the
            height and width of the ActiveX control (percentage sizes are allowed), the name
            of the XAML file that contains your WPF/E content, and a value that specifies whether
            the control is windowless.</p>
    </div>
    <div class="section">
        <a name="createcontent"></a>
        <h3>
            step 3: create your WPF/E content files</h3>
        <p>
            Now that your HTML file is configured, it&#39;s time to create your content.</p>
        <ol type="a">
            <li>
                <p>
                    Create a blank file called <code>&quot;myxaml.xaml&quot;</code> in the same directory
                    as your HTML file. If you changed the source file parameter in the previous step,
                    change this file name to match.
                </p>
            </li>
            <li>
                <p>
                    (optional) If your WPF/E project will contain script, create a JavaScript file to
                    contain the script and then add the following line to your HTML file, after the
                    &lt;script&gt;&lt;/script&gt; tag you you added in step 1.</p>
                <pre class="javascript">
<font size="2" color="#0000ff">&lt;</font><font size="2" color="#800000">script</font><font
    size="2"> </font><font size="2" color="#ff0000">type</font><font size="2" color="#0000ff">=&quot;text/javascript&quot;</font> <font
        size="2" color="#ff0000">src</font><font size="2" color="#0000ff">=&quot;my-script.js&quot;&gt;&lt;/</font><font
            size="2" color="#800000">script</font><font size="2" color="#0000ff">&gt;</font></pre>
            </li>
        </ol>
    </div>
    <div class="section">
        <a name="additionalcontent"></a>
        <h3>
            adding additional WPF/E content</h3>
        <p>
            If you want to create more than one WPF/E ActiveX control on your page, repeat steps
            2 and 3 for each control, and be sure to give each ActiveX control a unique name.</p>
    </div>
    <div class="section">
        <a name="sampleproject"></a>
        <h3>
            a sample project</h3>
        <p>
            If you&#39;ve gotten stuck or would just like to see what a simple WPF/E project
            looks like, copy the following files to your machine and navigate to the <code>SampleProject.html</code>
            file.</p>
        <ul>
            <li><a href="samples/SampleProject.html">SampleProject.html</a></li><li><a href="samples/SampleProject.xaml">
                SampleProject.xaml</a></li><li><a href="samples/SampleProject.js">SampleProject.js</a></li><li>
                    <a href="samples/aghost.js">aghost.js</a></li></ul>
    </div>
    <div class="section">
        <a name="whatsnext"></a>
        <h3>
            what's next?</h3>
        <p>
            In the next part, <a href="xaml-noframes.html">create a XAML file</a>, you'll learn
            how to add content to your XAML file.</p>
    </div>

    <div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 0; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>
</body>
</html>
